<template>
  <div class="box">
    <van-nav-bar
        title="答案之书"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
        placeholder
    />
    <div class="content">
      <h3>答案之书</h3>
      <p>当你的生活中出现了不能解决的问题时，答案之书将会给你答疑解惑！</p>
      <img is-link @click="showPopup" src="../../assets/book.webp" alt="">
      <span>默认问题，点击书本获取答案</span>
    </div>
    <div>
      <van-popup v-model="show">
        <!--      loading 效果-->
<!--        <van-loading type="spinner" v-if="show">加载中...</van-loading>-->
        <div>
          <h5 v-text="this.answer">{{this.answer}}</h5>
        </div>
        <p class="next">获取下一个答案>></p>

      </van-popup>

    </div>


  </div>
</template>

<script>
import {book} from "@/api/api";

export default {
name: "Book",
  data(){
    return{
      answer:{},
    //  弹出层
      show: false,
    }
  },
  methods:{
    //弹出层
    showPopup() {
      this.show = true;
      book().then(res=>{
        console.log(res)
        // this.answer = res.data.match(/`中文：`+(\S*)+`nTips:昭歌API技术支持`/)
        this.answer = res.data

        console.log(this.answer)
      })
    },
  }
}
</script>

<style lang="less" scoped>
.box{
  .content{
    //margin: auto;
    text-align: center;
    h3{
      margin-top: 20px;
    }
    p{
      padding: 20px;
    }
    img{
      width: 100%;
    }
    span{
      display: block;
      margin-top: 10px;
      color: grey;
    }
  }
  .next{
    margin: 10px;
    text-align: center;
  }


}


</style>